<template>
	<view class="container">
		<!-- 顶部蓝色背景和头像 -->
		<view class="header">
			<image class="avatar" :src="userInfo.avatarUrl || '/static/images/icon/yonghu.png'" />
			<button v-if="!userInfo.nickName" class="login1" open-type="getUserInfo" @getuserinfo="onGetUserInfo">请登录</button>
			<view v-else class="login">{{ userInfo.nickName }}</view>
		</view>
		<!-- 账户积分卡片 -->
		<view class="score-card">
			<view class="score-info">
				<text>账户余额</text>
				<text class="score">600积分</text>
			</view>
			<button class="charge">充值</button>
		</view>
		<!-- 我的招工 -->
		<view class="section">
			<view class="section-title">我的招工<text class="section-more">全部招工</text></view>
			<view class="grid">
				<view class="grid-item" v-for="item in jobs" :key="item.text">
					<image class="grid-icon" :src="item.icon" />
					<view class="grid-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="section">
			<view class="section-title">我的服务</view>
			<view class="grid">
				<view class="grid-item" v-for="item in services" :key="item.text">
					<image class="grid-icon" :src="item.icon" />
					<view class="grid-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<!-- 其他 -->
		<view class="section">
			<view class="section-title">其他</view>
			<view class="grid">
				<view class="grid-item" v-for="item in others" :key="item.text">
					<image class="grid-icon" :src="item.icon" />
					<view class="grid-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<!-- 帮助 -->
		<view class="section">
			<view class="section-title">帮助</view>
			<view class="grid">
				<view class="grid-item" v-for="item in helps" :key="item.text">
					<image class="grid-icon" :src="item.icon" />
					<view class="grid-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
const username = ref(uni.getStorageSync("username") || "");
const isLogin = ref(!!uni.getStorageSync("userId"));

function goLogin() {
  uni.navigateTo({ url: "/src/pages/login/login" });
}
function logout() {
  uni.clearStorageSync();
  isLogin.value = false;
  username.value = "";
  userInfo.value = {};
  uni.showToast({ title: "已退出登录", icon: "none" });
  setTimeout(() => uni.reLaunch({ url: "/src/pages/mine/mine" }), 500);
}

function onGetUserInfo(e) {
	if (e.detail && e.detail.userInfo) {
		userInfo.value = e.detail.userInfo;
	}
}
onMounted(() => {
  username.value = uni.getStorageSync("username") || "";
  isLogin.value = !!uni.getStorageSync("userId");
});

// 新增：每次页面显示时刷新登录信息
onShow(() => {
  username.value = uni.getStorageSync("username") || "";
  isLogin.value = !!uni.getStorageSync("userId");
});
const userInfo = ref({});
const jobs = [
  { icon: "/static/images/icon/shouye.png", text: "招工中" },
  { icon: "/static/images/icon/tongxunlu.png", text: "审核中" },
  { icon: "/static/images/icon/tianjiayonghu.png", text: "已结束" },
  { icon: "/static/images/icon/duihuaxinxi.png", text: "已撤回" },
];
const services = [
  { icon: "/static/images/icon/shouye.png", text: "发布招工" },
  { icon: "/static/images/icon/tongxunlu.png", text: "好活儿" },
  { icon: "/static/images/icon/tianjiayonghu.png", text: "招工VIP" },
  { icon: "/static/images/icon/duihuaxinxi.png", text: "实名认证" },
  { icon: "/static/images/icon/yonghu.png", text: "我的简历" },
  { icon: "/static/images/icon/yonghu.png", text: "企业认证" },
  { icon: "/static/images/icon/yonghu.png", text: "积分明细" },
];
const others = [
  { icon: "/static/images/icon/shouye.png", text: "获取积分" },
  { icon: "/static/images/icon/tongxunlu.png", text: "关注牛人" },
  { icon: "/static/images/icon/tianjiayonghu.png", text: "历史浏览" },
  { icon: "/static/images/icon/duihuaxinxi.png", text: "收藏招工" },
  { icon: "/static/images/icon/yonghu.png", text: "致电历史" },
  { icon: "/static/images/icon/yonghu.png", text: "置顶曝光" },
];
const helps = [
  {
    icon: "/static/images/icon/shouye.png",
    text: "咨询客服",
    url: "/src/pages/customerService/customerService",
  },
  { icon: "/static/images/icon/tongxunlu.png", text: "建议反馈", url: "" },
  { icon: "/static/images/icon/tianjiayonghu.png", text: "客服回电", url: "" },
];

const handleClick = (url) => {
  // 如果是客服咨询功能
  if (url === "/src/pages/customerService/customerService") {
    // 检查当前登录的是否是客服账号
    const username = uni.getStorageSync("username");
    if (username === "customer_service") {
      uni.showToast({
        title: "客服账号无法使用该功能",
        icon: "none",
      });
      return;
    }
  }

  if (url) {
    uni.navigateTo({
      url: url,
    });
  } else {
    uni.showToast({
      title: "功能未开放",
      icon: "none",
    });
  }
};
</script>

<style scoped>
.container {
  background: #f6f8fa;
  min-height: 100vh;
  padding-bottom: 32rpx;
}

.header {
  background: #1890ff;
  padding: 48rpx 20rpx 32rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom-left-radius: 32rpx;
  border-bottom-right-radius: 32rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 8rpx;
  border: 4rpx solid #fff;
}

.login {
  color: #fff;
  font-size: 32rpx;
  margin-bottom: 4rpx;
}
.login1 {
  color: #000;
  font-size: 32rpx;
  margin-bottom: 4rpx;
}
.score-card {
  background: #fff;
  margin: -12rpx 16rpx 16rpx 16rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 24rpx;
  position: relative;
  z-index: 2;
}

.score-info {
  display: flex;
  flex-direction: column;
}

.score {
  color: #1890ff;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 4rpx;
}

.charge {
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 8rpx 32rpx;
  font-size: 26rpx;
}

.section {
  background: #fff;
  margin: 16rpx;
  border-radius: 12rpx;
  padding: 18rpx 12rpx 8rpx 12rpx;
  box-shadow: 0 2rpx 8rpx #eee;
}

.section-title {
  font-weight: bold;
  font-size: 26rpx;
  color: #1890ff;
  margin-bottom: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-more {
  color: #888;
  font-size: 22rpx;
  margin-left: 12rpx;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18rpx;
}
.grid-item-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grid-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
}

.grid-text {
  font-size: 22rpx;
  color: #333;
}
</style>
